'use strict'
import React, { createClass, PropTypes } from 'react'
import $ from 'jquery'

const GoodList = createClass({
    getInitialState() {
        return {
            loading: true,
            error: null,
            data: null
        };
    },
    componentDidMount() {
        var me = this;
        $.ajax({
            url: '../webapp/data/goodList.json',
            type: 'GET',
            dataType: 'JSON',
            success: function (resp) {
                me.setState({loading: false, data: resp});
            }
        });
    },
    showExchangeModal(item) {
        const { setExchangeModalData } = this.props;
        setExchangeModalData(item);
        $('#exchangeModal').modal('show');
    },
    render() {
        if (this.state.loading) {
            return <div className="loading">努力加载中...</div>
        }
        else if (this.state.data) {
            let goodListData = this.state.data;
            //console.log('userPoints => '+userPoints);
            return (<ul className="list list-view good-list">
                {
                    goodListData.map((item, idx) => {
                        var actBtn;
                        if (item.exchange == 1) {
                            actBtn =
                                <button className="btn btn-blue-border" onClick={this.showExchangeModal.bind(this, item)}>兑换</button>
                        }
                        else {
                            actBtn = <button className="btn btn-blue-border disabled">兑换</button>
                        }
                        return (
                            <li className="good-item" key={idx}>
                                <div className="good-image">
                                    <img src={item.img_url}/>
                                </div>
                                <div className="good-meta">
                                    <h3 className="good-title">{item.title}</h3>
                                    <div className="need-points">{item.points}</div>
                                </div>
                                <div className="good-actions">{actBtn}</div>
                            </li>
                        );
                    })
                }
            </ul>)
        }
        else {
            return <div>服务器响应错误</div>
        }
    }
});

export default GoodList;